<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				max-width: 45em; margin: auto; padding: 0 1em 5em; background-color: #333333; color: #dddddd;
			}
			a, a:visited {
				color: lightgreen; text-decoration: none;
			}
			#result {
				margin: 2em 5em 2em 5em; font-weight: bold;
			}
			#logotype {
				text-align:center; font-size:300%;
			}
			form {
				display: flex; align-items: center;
			}
			#answer {
				flex-basis: 100%; margin: 0 1em 0 1em; font-size: 110%;
			}
		</style>
		<script>
// First part of a question/answer
let firstPart = [
		{"english":["I am (a/an)", "We are"],
		"toki":"mi"},

		{"english":["You are (a/an)"],
		"toki":"sina"},

		{"english":["He is (a/an)", "She is (a/an)", "They are", "It is (a/an)"],
		"toki":"ona li"},

		{"english":["A apple is (a/an)","A pear is (a/an)","Fruits are", "A tomato is (a/an)","Pineapples are","Mushrooms are","A mushroom is (a/an)","Cucumbers are","An onion is (a/an)","A banana is (a/an)"],
		"toki":"kili li"},

		{"english":["Dogs are","Animals are","A giraffe is (a/an)","A polar bear is (a/an)","Tigers are","An ape is (a/an)","A donkey is (a/an)","A horse is (a/an)","Badgers are","A rat is (a/an)"],
		"toki":"soweli li"}
		];


// Second part of a question/answer
let secondPart = [
		{"english":["good", "simple"],
		"toki":"pona"},

		{"english":["bad","evil","unnecessary","complex"],
		"toki":"ike"},

		{"english":["big","great","important"],
		"toki":"suli"},

		{"english":["small","few","young"],
		"toki":"lili"},

		{"english":["lemon(s)","carrot(s)","potato(es)","banana(s)","grape(s)","melon(s)","pumpkin(s)"],
		"toki":"kili"},

		{"english":["animal(s)","dog(s)","elephant(s)","mammal(s)","kangaroo(s)","tiger(s)","cat(s)","cow(s)"],
		"toki":"soweli"}
		];

let correctAnswer = ""

function getRandom(items) {
	return items[Math.floor(Math.random()*items.length)]
}

function askQuestion() {
	document.getElementById("answer").value = ""
	let firstP = getRandom(firstPart)
	let secondP = getRandom(secondPart)
	let sentence = getRandom(firstP.english) + " " + getRandom(secondP.english)
	correctAnswer = firstP.toki + " " + secondP.toki
	document.getElementById("sentence").innerHTML = sentence
}

function submitAnswer() {

	if (document.getElementById("answer").value == correctAnswer) {
		document.getElementById("result").innerHTML = "Correct!"
	} else {
		document.getElementById("result").innerHTML = "Wrong :( The correct answer is \"" + correctAnswer + "\""
	}

	askQuestion()
}

		</script>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width,initial-scale=1'>
		<link rel='icon' href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📜</text></svg>'>
		<link rel='me' href='mailto:bjorn.warmedal@gmail.com' />
		<title>Toki Pona Lesson 1 - Björn Wärmedal</title>
	</head>
	<body onload='askQuestion()'>
		<p id='logotype'><a href='index.html'>📜</a></p>
<h1>Lesson 1</h1>
<p><a href='https://devurandom.xyz/tokipona/1.html'>These exercises are based on the first lesson at devurandom.xyz</a></p>

<p>Translate "<span id='sentence'></span>"</p>
<form onsubmit='submitAnswer()' autocomplete='off' action='javascript:void(0)'><label for='answer'>Translation:</label><input id='answer' type='text'></input><input type='submit' value='Answer'></input>
</form>
<p id='result'></p>
<p>-- CC0 Björn Wärmedal, consider the code to be MIT licensed.</p>
</body>
</html>
